<template>
  <div class="echa-easy-bar">
    <v-chart :auto-resize="true"
             :options="option"
             @click="toPages" />
  </div>
</template>
<script lang="ts">
import { EChartOption } from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface colorType {
  from: string;
  to: string;
}

@Component({
  components: {},
})
export default class echaEasyBar extends Vue {
  public colors: colorType[] = [
    {
      from: "rgba(253,234,1,1)",
      to: "rgba(253,234,1,0)",
    },
    {
      from: "rgba(57,235,130,1)",
      to: "rgba(57,235,130,0)",
    },
    {
      from: "rgba(56,245,241,1)",
      to: "rgba(56,245,241,0)",
    },
    {
      from: "rgba(248,107,3,1)",
      to: "rgba(248,107,3,0)",
    },
  ];
  @Prop({ default: () => [] })
  dataList: Array<any> | undefined;
  @Prop({ default: () => "" })
  yAxisUnit?: string | "";
  public option: EChartOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [],
        axisLine: {
          lineStyle: {
            color: "rgba(115,129,167,0.8)",
          },
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          fontFamily: "Microsoft YaHei",
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: {
      type: "value",
      name: "",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        barWidth: "15%",
        barGap: "0", //柱间距离
        label: {
          show: false,
          fontSize: 14,
          color: "#fff",
          position: "top",
        },
        data: [],
      },
    ],
  };

  @Watch("dataList", { immediate: true, deep: true })
  getBarData(val: any) {
    (this as any).option.xAxis[0].data = val.map((k: any) => k.name);
    (this as any).option.series[0].data = val.map((k: any, i: number) => {
      let res = {
        name: k.name,
        value: k.value,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: this.colors[i].from, // 0% 处的颜色
              },
              {
                offset: 1,
                color: this.colors[i].to, // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
      };
      return res;
    });
  }
  @Watch("yAxisUnit", { immediate: true, deep: true })
  getYAxisUnit(val: any) {
    (this as any).option.yAxis.name = val;
  }
  toPages(val: any): void {
    this.$emit("click", val);
  }

  mounted() {
    // console.log(this.xAxisData);
  }
}
</script>
<style lang="scss" scoped>
.echa-easy-bar {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
